<template>
    <common-modal
        ref="modalRef"
        v-bind="attrs"
        @sure="search"
        @cancel="handleCancel"
        @before-close="reset"
        @open="handleOpen"
    >
        <el-form
            label-width="130px"
            :rules="rules"
            ref="formRef"
            :inline="false"
            :model="formData"
        >
            <el-form-item label="媒体账户：">
                <el-input
                    v-model="account.account"
                    placeholder="请输入媒体账户"
                    disabled
                />
            </el-form-item>
            <el-form-item label="添加账号：" prop="list">
                <account-set
                    ref="accountRef"
                    v-model:mediaAccount="formData.list"
                    :pitcher-list="formData.pitcherList"
                />
            </el-form-item>
        </el-form>
    </common-modal>
</template>
<script>
export default {
    inheritAttrs: false,
};
</script>
<script setup>
import { reactive, useAttrs, ref } from "vue";
import commonModal from "@/components/commonModal.vue";
import AccountSet from './subAccountSet.vue'
import useForm from "@/hooks/useForm";
import { RoleSave } from "@/apis/role";
import { GetViscountByAccountId } from '@/apis/media'
import { ElMessage } from "element-plus";
import { GetPitcher } from "@/apis/user";
import { editViscount, addViscount } from "@/apis/media";
const accountRef = ref(null)
const props = defineProps({
    type: {
        type: String,
        default: "add",
    },
    account: {
        type: Object,
        default: () => ({}),
    },
});
const attrs = useAttrs();
const formData = reactive({
    list: [],
    pitcherList: []
});
const modalRef = ref(null);
// 确定
const handleSure = async () => {
    await Promise.all(createSavePromiseList());
    ElMessage.success({
        message: "操作成功",
        type: "success",
    });
    emits("success");
    handleCancel();
};
const { formRef, search, reset } = useForm(handleSure);
const validateAccount = (rule, value, cb) => {
    accountRef.value?.validate().then(res => {
        cb()
    }).catch(err => cb(new Error(err)))
}
const rules = {
  list: [{ validator: validateAccount, message: "请输入完善账号信息" }],
};

// 取消 关闭弹窗
const handleCancel = () => {
    modalRef.value?.close();
};

// 确定
const emits = defineEmits(["success"]);

// 打开弹窗
const handleOpen = () => {
    const { account } = props;
    GetViscountByAccountId(account.id).then(res => {
        console.log('res: ', res);
        formData.list = res || []
    })
    GetPitcher().then(res => {
        formData.pitcherList = res
    })
};
const createSavePromiseList = () => {
    const addList = (formData.list || []).filter(v => !v.id).map(v => ({ ...v, mediaAccountId: props.account.id }))
    const editList = (formData.list || []).filter(v => v.id).map(v => ({ ...v, mediaAccountId: props.account.id }))
    let promiseList = []
    if (addList && addList.length) {
        promiseList.push(addViscount(addList))
    }
    if (editList && editList.length) {
        promiseList.push(editViscount(editList))
    }
    return promiseList
}
</script>
